<template>
    <div class="w-100">
        <el-row :gutter="24">
            <template v-for="field in $attrs.detailFields" :key="field">
                <el-col :span="4" class="text-end py-1">{{ field.title }}:</el-col>
                <el-col :span="8" class="text-start py-1">
                    <span v-if="field.colorTag == 'color'" :class="$utils.conv.getTextColor(detail[field.name])"
                        v-x-bind="{ fieldId: field.fieldId, value: detail[field.name] }"></span>
                    <el-tag v-else-if="field.colorTag == 'tag'" :type="$utils.conv.getTypeColor(detail[field.name])"
                        v-x-bind="{ fieldId: field.fieldId, value: detail[field.name] }"></el-tag>
                    <span v-else v-x-bind="{ fieldId: field.fieldId, value: detail[field.name] }"></span>
                </el-col>
            </template>
        </el-row>
    </div>

</template>
<script setup>
import { ref } from 'vue';
import { requestSwapData } from 'xcore/data';
import $utils from 'xcore/utils';
const detail = ref({})

requestSwapData((data) => {
    detail.value = data;
})

</script>